<script setup>
import {reactive , defineEmits} from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  buttonText: {
    type: String,
    required: true,
  },
})
let emit = defineEmits(['onChange','onHandle'])

const inputValue = ref('')
const form = reactive({
  // eslint-disable-next-line camelcase
  teacher_name: "", //年级主任姓名
  teacher_id: "", //年级主任ID

})
let sexList = ref(['男', '女'])
const inputTypeStatus = ref(false)//自定义下拉框是展示开始隐藏
const inputType = ref(1)//输入框筛选  1姓名  2ID
const inputTypeSelect = reactive([{value: 1, label: '姓名'}, {value: 2, label: 'ID'}])

//判断下拉框是显示还是隐藏
const handleVisibleChange = e => {
  inputTypeStatus.value = !inputTypeStatus.value
}
// 删除回调
const onHandle =(type)=>{
  emit('onHandle', type)
}
const search = () => {
  let inputValue = form.inputValue
  if(inputType.value ==1){
    form.teacher_name = inputValue
    form.teacher_id = ''
  }else{
    form.teacher_name = ''
    form.teacher_id = inputValue
  }
  showFlag.value = false
  emit('onChange', form)
}
const reset = () => {
  emit('onChange', form)
}
const showFlag = ref(false)
const changeShowFlag = ()=>{
  showFlag.value = !showFlag.value
}
</script>

<template>
  <v-list class="header_box">
    <div class="head">
      <div class="heads">
        <div class="head_title">
          {{ props.title }}
        </div>
        <div class="search">
          <div style="position: relative;">
            <div class="select">
              {{ inputType == 1 ? '姓名' : 'ID' }}
              <i
                v-if="inputTypeStatus"
                class="ri-arrow-up-s-line"
                style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
              />
              <i
                v-if="!inputTypeStatus"
                class="ri-arrow-down-s-line"
                style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
              />
            </div>
            <VSelect
              v-model="inputType"
              :items="inputTypeSelect"
              item-title="label"
              item-value="value"
              label="Standard"
              placeholder="Select Item"
              style="position: absolute;inset-block-start: 0;inset-inline-start: 0;opacity: 0;"
              eager
              @click="handleVisibleChange"
            />
          </div>
          <VTextField
            v-model="form.inputValue"
            single-line
            placeholder="搜索"
            variant="plain"
            max-width="180px"
            style="block-size: 27px;margin-block-start: -36px;margin-inline-start: 10px;"
          />

          <i
            @click="search"
            class="ri-search-line cursor-pointer"
            style="block-size: 18px;inline-size: 18px;margin-inline-start: auto;"
          />
        </div>
        <div></div>
        <div @click="onHandle('openSecondPage')"  class="examination-session border-radius-md" >
          考试场次管理
        </div>
        <div class="right">
          <i
            class="ri-delete-bin-5-line cursor-pointer"
            style="block-size: 24px;inline-size: 24px;margin-inline-start: 24px;"
            @click="onHandle('delete')"
          />
          <VBtn
            color="primary"
            style="margin-inline-start: 24px;"
            @click="onHandle('add')"
          >
            {{ buttonText }}
          </VBtn>
        </div>
      </div>
    </div>
  </v-list>
</template>

<style lang="scss" scoped>
@use "@configured-variables" as variables;

.menu-box{
  border-radius: 6px;
  position: absolute;
  top: 50px;
  left: -135px;
  width: 310px;
  background-color: #fff;
  z-index:999;
}
.input-width-height {
  width: 280px !important;
}

.v-picker-title {
  display: none !important;
}
.examination-session{
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-button-grey-color));
  background: rgba(var(--v-theme-button-grey-bg));

}

.right {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

.select {
  z-index: 1;
  display: flex;
  align-items: center;
  color: #151619;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;

}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;

    }
  }
}
.header_box {
  padding: 0px;
  overflow: visible;
}
</style>
